<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Login Page | Amaze UI Example</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="alternate icon" type="image/png" href="${re.contextPath}/mobile/i/favicon.png">
  <#include "${re.contextPath}/mobile/core/amaze.ftl"/>  

  
  
  <style>
   #vld-tooltip {
    position: absolute;
    z-index: 1000;
    padding: 5px 10px;
    background: #F37B1D;
    min-width: 150px;
    color: #fff;
    transition: all 0.15s;
    box-shadow: 0 0 5px rgba(0,0,0,.15);
    display: none;
  }

  #vld-tooltip:before {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: "";
    border-width: 0 8px 8px;
    border-color: transparent transparent #F37B1D;
    border-style: none inset solid;
    }
  
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 200%;
      color: #333;
      margin-top: 30px;
    }
    .header p {
      font-size: 14px;
    }
  </style>
</head>
<body>
<div class="header">
  <div class="am-g">
    <h1>Web ide</h1>
    <p>Integrated Development Environment<br/>代码编辑，代码生成，界面设计，调试，编译</p>
  </div>
  <hr />
</div>
<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
    <h3>登录</h3>
    <hr>
    <div class="am-btn-group">
      <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
      <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i> Google+</a>
      <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i> stackOverflow</a>
    </div>
    <br>
    <br>

    <form method="post" action="${re.contextPath}/login" class="am-form" id="form-with-tooltip">
     <fieldset>
	    <div class="am-form-group">
	      <label for="doc-vld-name-2-0">用户名：</label>
	      <input name="username" type="text" id="doc-vld-name-2-0" minlength="3"
	             placeholder="输入用户名（至少 3 个字符）" required/>
	    </div>
	
	    <div class="am-form-group">
	      <label for="doc-vld-pwd-1-0">密码：</label>
	      <input name="password" type="password" id="doc-vld-pwd-1-0" placeholder="请输入密码" required data-foolish-msg="把 IQ 卡密码交出来！"/>
	    </div>
      <br>
      
      <label for="remember-me">
        <input id="remember-me" name="rem" type="checkbox" >
      		  记住密码
      </label>
      <br />
      <div class="am-cf">
         <button class="am-btn am-btn-secondary" type="submit" >登 录</button>
        <input type="button" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr">
      </div>
      <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
		  <div class="am-modal-dialog">
<!-- 		    <div class="am-modal-hd">提示</div> -->
		    <div class="am-modal-bd">
		      		${open }
		    </div>
		    <div class="am-modal-footer">
		      <span class="am-modal-btn">确定</span>
		    </div>
		  </div>
		</div>
       </fieldset>
    </form>
    <hr>
    <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
  </div>
</div>
</body>
<script type="text/javascript">


// 	$.getJSON('${re.contextPath}/mobile/tologin', {username:'xx', password:'yy'}, function(data) {
// 			debugger
// 		console.log(data);
// 		return data;
// 	});

// 	var tmp=[];

$(document).ready(function(){
	<#if open??>
		$("#my-alert").modal('open'); 
	</#if>
		
  $("form").submit(function(e){
	  
// 	  var b =true;
// 		 $.ajax({
// 				type : 'POST',
// 				url : '${re.contextPath}/mobile/checklogin',
// 				async : false,
// 				dataType : "json",
// 				data: {username:$('#doc-vld-name-2-0').val(), password:$('#doc-vld-pwd-1-0').val()},
// 				success : function(data) {debugger
// 					console.log(data); // 问题：值如何传递到外面去。
// 					if(!data.success){
// 						b = false;
// 						console.log("登陆信息错误");
// 						$("#my-alert").modal('open'); 
// 					}
// 				},
// 				error : function(a, b, c) {
// 					console.log('error');
// 					console.log(a);
// 					console.log(b);
// 					console.log(c);
// 				}

// 			});
// 		 return b;
  });
});

	
</script>
</html>
